<script setup lang='ts'>
import type { TabPaneName } from 'element-plus'

import { ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    modelValue?: any
    tabs?: any
    title?: string
    trans?: string
}>(), {
    tabs: () => [],
    title: '场景选购',
    trans: 'SCENE SELECTION',
})

const emits = defineEmits(['update:modelValue', 'handle'])

const activeName = ref(0)
const { tabs, title, trans } = toRefs(props)

function handleClick(idx: TabPaneName) {
    const item = tabs.value[idx]
    emits('handle', { idx, item })
    emits('update:modelValue', item.value)
}
</script>

<template>
    <div class="sence-tab flex items-center flex-justify-between">
        <div class="jc-home-title">
            <span>{{ title }}</span>

            <p>{{ trans }}</p>
        </div>

        <el-tabs v-model="activeName"
                 class="demo-tabs"
                 @tab-change="handleClick"
        >
            <template v-for="(tab, index) in tabs"
                      :key="index"
            >
                <el-tab-pane :label="tab.label || tab"
                             :name="index"
                />
            </template>
        </el-tabs>
    </div>
</template>

<style lang="less" scoped>
.sence-tab {
    .demo-tabs {
        :deep(.el-tabs__nav-wrap)::after {
            background: transparent;
        }

        :deep(.el-tabs__active-bar) {
            // width: 24px !important;
            // margin-left: 16px;
        }
    }
}
</style>
